<template>
	<view class="container">
		<topTitle :backgroundColor="topBg">
			<template #content>
				<!-- 搜索框 -->
				<view class="top-content">
					<uni-icons type="left" :color="leftIconBg" size="48rpx" class="left" @click="fanh"></uni-icons>
				</view>
			</template>
		</topTitle>
		<!-- 内容区域 -->
		<view class="content">
			<!-- 标题和编号 -->
			<block v-if="status == 1">
				<!-- 通过 -->
				<view class="title-section">
					<view class="title-icon">
						<uni-icons type="checkbox-filled" size="58rpx" color="#fff"></uni-icons>
					</view>
					
					<view class="title-text" >
						<text class="title">通过</text>
						<text class="subtitle">提现编号：234231029431</text>
					</view>
				</view>
			</block>
			<block v-else-if="status == 2">
				<!-- 拒绝 -->
				<view class="title-section">
					<view class="title-icon">
						<uni-icons type="info-filled" size="58rpx" color="#fff"></uni-icons>
					</view>
					<view class="title-text" >
						<text class="title">拒绝</text>
						<text class="subtitle">提现编号：234231029431</text>
					</view>
				</view>
				<!-- 提示信息 -->
				<view class="warning-box">数据触发刷单风险。</view>
			</block>
			<block v-else-if="status == 3">
				<!-- 审核 -->
				<view class="title-section">
					<view class="title-icon">
						<uni-icons type="help-filled" size="58rpx" color="#fff"></uni-icons>
					</view>
					<view class="title-text" >
						<text class="title">待审核</text>
						<text class="subtitle">提现编号：234231029431</text>
					</view>
				</view>
				<!-- 提示信息 -->
				<view class="await-box">操作人正在快马加鞭审核中，请耐心等候...</view>
			</block>

			<!-- 金额展示 -->
			<view class="amount-section">
				<text class="amount-label">申请结算金额</text>
				<text class="amount">{{$formatAmount(2263)}}</text>
			</view>

			<!-- 提现单信息 -->
			<view class="withdrawal-info">
				<text class="section-title">提现单信息</text>
				<view class="info-item">
					<text class="info-label">申请人</text>
					<text class="info-value">马云</text>
				</view>
				<view class="info-item">
					<text class="info-label">手机号</text>
					<text class="info-value">18888888888</text>
				</view>
				<view class="info-item">
					<text class="info-label">申请订单数量</text>
					<text class="info-value">20</text>
				</view>
				<view class="info-item">
					<text class="info-label">申请结算金额</text>
					<text class="info-value" style="font-weight: bold;">¥{{$formatAmount(200)}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">申请提现时间</text>
					<text class="info-value">2025-04-10 12:23:34</text>
				</view>
				<view class="info-item">
					<text class="info-label">处理时间</text>
					<text class="info-value">2025-04-10 12:23:34</text>
				</view>
			</view>

			<!-- 订单记录 -->
			<view class="order-records">
				<view class="order-header">
					<text class="order-title">订单记录</text>
					<view class="order-action">
						<text>导出数据</text>
						<uni-icons type="right" size="32rpx" color="#999" style="margin-left: 20rpx;"></uni-icons>
					</view>
				</view>
				<view class="order-item" v-for="item in orderItems" :key="item.id">
					<view class="order-left">
						<text class="order-name">商品名称</text>
						<text class="order-commission">佣金比例：50%</text>
					</view>
					<view class="order-right">
						<text class="order-price">{{ item.price }}</text>

						<text class="order-estimated">预估收入</text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topBg: '',
				leftIconBg: '#fff',
				orderItems: [{
						id: 1,
						price: '20.00'
					},
					{
						id: 2,
						price: '20.00'
					},
					{
						id: 3,
						price: '20.00'
					},
					{
						id: 4,
						price: '20.00'
					},
					{
						id: 5,
						price: '20.00'
					},
					{
						id: 6,
						price: '20.00'
					},
				],
				status: 0, // 1 通过 2.拒绝 3.审核
			}
		},
		onLoad(options) {
			this.status = options.status || 3
		},
		onPageScroll(e) {
			console.log(e.scrollTop)
			if (e.scrollTop > 150) {
				this.topBg = '#fff'
				this.leftIconBg = '#000'
			} else {
				this.topBg = ''
				this.leftIconBg = '#fff'
			}
		},
		methods: {
			fanh() {
				uni.navigateBack()
			}
		}
	}
</script>


<style lang="scss">
	page {
		width: 100%;
		height: 100%;

	}

	.container {
		background: linear-gradient(to bottom, #0368ff, #f8f8f8 40%);
		height: 100%;
		width: 100%;
	}

	.top-content {
		height: 100%;
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.left {
			position: absolute;
			left: 0;
		}
	}

	/* 内容区域 */
	.content {
		padding: 30rpx;
	}

	/* 标题和编号 */
	.title-section {
		display: flex;
		align-items: start;
		margin-bottom: 20rpx;
		margin-top: 20rpx;

		.title-icon {
			color: #ffcc00;
			margin-right: 10rpx;
		}

		.title-text {
			display: flex;
			flex-direction: column;

			.title {
				font-size: 42rpx;
				font-weight: bold;
				color: white;
			}

			.subtitle {
				font-size: 26rpx;
				color: white;
				opacity: .8;
				margin-top: 10rpx;
			}
		}
	}

	/* 提示信息 */
	.warning-box {
		background-color: #fdf7eb;
		color: #eec576;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	
	.await-box {
		background-color: #e4f0fe;
		color: #007aff;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	/* 金额展示 */
	.amount-section {
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 10rpx;
		padding: 40rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;

		.amount-label {
			color: #000;
			opacity: .8;
			font-size: 28rpx;
			margin-bottom: 5rpx;
		}

		.amount {
			color: #000;
			font-size: 52rpx;
			font-weight: bold;
		}
	}

	/* 提现单信息 */
	.withdrawal-info {
		background-color: white;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}


		.info-item {
			display: flex;
			justify-content: space-between;
			// margin-bottom: 20rpx;
			padding: 30rpx 0;
		}

		.info-label {
			color: #666;
			font-size: 28rpx;
		}

		.info-value {
			color: #333;
			font-size: 28rpx;
		}
	}




	/* 订单记录 */
	.order-records {
		background-color: white;
		border-radius: 10rpx;
		padding: 30rpx;

		.order-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.order-title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.order-action {
				color: #999;
				font-size: 26rpx;
			}
		}

		.order-item {
			display: flex;
			justify-content: space-between;
			// margin-bottom: 20rpx;
			// padding-bottom: 20rpx;
			border-bottom: 1px solid #f0f0f0;
			padding: 30rpx 0;
			.order-left {
				display: flex;
				flex-direction: column;
				.order-name {
					font-size: 28rpx;
					margin-bottom: 5rpx;
				}
				.order-commission {
					font-size: 24rpx;
					color: #999;
					margin-top: 5rpx;
				}
			}
			.order-right {
				display: flex;
				flex-direction: column;
				.order-price {
					margin-left: auto;
					font-size: 28rpx;
				}
				.order-estimated {
					font-size: 24rpx;
					color: #999;
					margin-top: 5rpx;
					margin-left: auto;
				}
			}
		}
	}
</style>